<!DOCTYPE html>
<html>
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<title>帖子列表</title>

	<!-- 所有的 css 资源 -->
	<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
	<link href="../../res/sa.css" rel="stylesheet">

	<!-- 所有的 js 资源 -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>

	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="../../res/sa.js"></script>
	<script src="data-list.js"></script>

</head>
<body>

<!-- 防止margin向下击穿 -->
<div style="margin-top: -1em;"><br></div>

<div class="vue-box">

	<!-- 参数栏 -->
	<div class="c-panel">
		<div class="c-title">检索参数</div>
		<el-form ref="form">

			<div class="c-item">
				<label class="c-label">id：</label>
				<el-input size="mini" type="number" v-model="p.id"></el-input>
			</div>

			<div class="c-item">
				<label class="c-label">标题：</label>
				<el-input size="mini" v-model="p.title"></el-input>
			</div>

			<div class="c-item" style="min-width: 10px;">
				<el-button @click="f5" icon="el-icon-search" size="mini" type="primary">查询</el-button>
			</div>

			<br/>
			<div class="c-item">
				<label class="c-label">排序：</label>
				<el-radio-group v-model="p.sort_type">
					<el-radio :label="0">发表时间</el-radio>
					<el-radio :label="1">喜欢数</el-radio>
					<el-radio :label="2">点击数</el-radio>
					<el-radio :label="3">分享数</el-radio>
				</el-radio-group>
			</div>


		</el-form>
	</div>

	<!-- 表格 -->
	<div class="c-panel">
		<h4 class="c-title">列表</h4>

		<el-table :data="dataList" class="data-table" size="mini">
			<el-table-column label="编号" prop="id" width="70px"></el-table-column>
			<el-table-column label="文章标题" prop="title"></el-table-column>
			<el-table-column label="文章内容" prop="content" width="400px"></el-table-column>
			<el-table-column label="发表人" prop="create_username"></el-table-column>
			<el-table-column label="发表于" prop="create_time"></el-table-column>
			<el-table-column label="点击量" prop="see_count"></el-table-column>
			<el-table-column label="喜欢" prop="like_count"></el-table-column>
			<el-table-column label="分享" prop="share_count"></el-table-column>
			<el-table-column label="操作" prop="address" width="150px">
				<template slot-scope="scope">
							<span @click="sa.$fast.showIframe('文章修改', 'art-add.html?id=' + scope.row.id)">
								<el-button class="c-button" icon="el-icon-edit" type="primary">修改</el-button>
							</span>
					<span @click="sa.$fast.fastDelete('/SerArticle/delete?id=' + scope.row.id, dataList, scope.row)">
								<el-button class="c-button" icon="el-icon-delete" type="danger">删除</el-button>
							</span>
				</template>
			</el-table-column>
		</el-table>


		<!-- 分页 -->
		<div class="page-box">
			<el-pagination :current-page.sync="page.pageNo"
			               :page-size.sync="page.pageSize"
			               :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
			               :total="page.count"
			               @current-change="f5(true)"
			               @size-change="f5(true)"
			               background
			               layout="total, prev, pager, next, sizes, jumper">
			</el-pagination>
		</div>

	</div>


</div>

<script>
    var app = new Vue({
        el: '.vue-box',
        data: {
            sa: sa,
            p: { // 查询参数
                sort_type: 0
            },
            page: sa.$fast.getPage(),// 分页信息
            dataList: dataList // 数据集合
        },
        methods: {
            // 数据刷新
            f5: function () {
                sa.post('/VocArticle/getList', this.p, function (res) {
                    // this.dataList = res.data;	// 数据
                    // this.page = res.page;		// 分页
                }.bind(this));
            }

        },
        created: function () {
            this.f5();
        }
    })
</script>

</body>
</html>
